<!DOCTYPE html>
<html lang="en">
    {% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
</head>

<body>
    <div class="utdm">
        <div class="utdm_mwuk">
            <a href="{% url 'rgck' %}"><img src="{% static 'img/loog.png' %}" class="utdm_img"></a>
            <div>
                {% if current_etyn == None %}
                <a href={% url 'logn' %}><span>登录</span></a>
                {% else %}
                <div>
                <ul class="layui-nav" lay-bar="disabled">
                    <li class="layui-nav-item" lay-unselect="">
                    <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
                    <dl class="layui-nav-child">
                        <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
                    </dl>
                    </li>
                </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="dmdm_ukwv">
        <div class="dmdm-left">
            <ul>
                <a href="{% url 'rgck' %}">
                    <li class="tfkh-uqjs">歌曲管理</li>
                </a>
                <a href="{% url 'skuj_tpgj' %}">
                    <li class="tfkh-uqjs01">歌单管理</li>
                </a>
                <a href="{% url 'etyn_tpgj' %}">
                    <li class="tfkh-uqjs01">用户管理</li>
                </a>
                <a>
                    <li class="tfkh-uqjs01">轮播管理</li>
                </a>
            </ul>
        </div>
        <div class="dmdm-rigth">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li><a href="{% url 'rgck' %}">全部歌曲</a></li>
                    <li class="layui-this">修改歌曲</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item ">

                    </div>
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form layui-form-pane" action="{% url 'skma_whnt' %}" method="post" enctype="multipart/form-data" >
                            {% csrf_token %}
                            <input type='text' name='id' hidden='' value={{sjrh.skma_id}}>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图片</label>
                                <div class="layui-input-inline">
                                    <input type="file" name="whww_img" autocomplete="off" onchange="changeFile()"
                                        id="File" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><img src="/media/{{sjrh.skma_img}}" width="140px" id="image"
                                        height="140px"></div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">歌名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title_name" autocomplete="off" value={{sjrh.skma_name}}
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">歌手</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" lay-verify="required" value={{sjrh.skrt}}
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">发行时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="date" id="date1" autocomplete="off" value={{sjrh.vtf_time}}
                                            class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">语种</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ygtk" lay-verify="required" value={{sjrh.ygtk}}
                                            autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">流派</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="iyir" lay-verify="required" value={{sjrh.iyir}}
                                            autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">唱片公司</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="kjrhwvng" lay-verify="required" value={{sjrh.kjrh_wvng}}
                                            autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">歌词</label>
                                    <div class="layui-input-inline">
                                        <input type="file" name="sk-yn" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">歌曲</label>
                                    <div class="layui-input-inline">
                                        <input type="file" name="sk-ma" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    layui.use(['laydate'], function () {
        var laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date1'
        });
    })
    function changeFile() {
        var image = document.getElementById("image");
        var address = document.getElementById("File").value;
        var name = document.getElementById("File").files[0];
        if (window.URL != undefined && name) {
            url = window.URL.createObjectURL(name);
        }
        image.src = url;
    }
</script>
<style>
    .utdm {
        width: 100%;
        height: 60px;
        position: fixed;
        border-bottom: 1px black solid;
        background-color: white;
    }

    .utdm_mwuk {
        width: 1080px;
        position: fixed;
        margin: auto;
        right: 0;
        left: 0;
        top: 0;
        display:flex;
        justify-content: space-between;
    }

    .layui-nav{
        background-color:#ffffff;
    }

    .utdm_img {
        height: 60px;
        width: auto;
    }

    .dmdm_ukwv {
        width: 1080px;
        margin: 0 auto;
    }

    .dmdm-left {
        width: 200px;
        height: 100vh;
        border-right: 1px black solid;
        float: left;
    }

    .dmdm-rigth {
        padding-top: 60px;
        width: 870px;
        float: right;
    }

    .dmdm-left ul {
        padding-top: 60px;
    }

    .dmdm-left ul a li {
        width: 100%;
        height: 50px;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
    }

    .tfkh-uqjs {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.74));
        color: white;
    }

    .tfkh-uqjs01:hover {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.74));
        color: white;
    }
</style>

</html>